// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function () {
  // 1. 导航栏高亮逻辑（滚动时匹配当前section）
  const sections = document.querySelectorAll('section')
  const navLinks = document.querySelectorAll('.nav-link')

  function highlightNavLink() {
    let current = ''
    sections.forEach((section) => {
      const sectionTop = section.offsetTop
      const sectionHeight = section.clientHeight
      // 滚动位置匹配当前section（偏移200px优化体验）
      if (pageYOffset >= sectionTop - 200) {
        current = section.getAttribute('id')
      }
    })
    // 切换导航高亮状态
    navLinks.forEach((link) => {
      link.classList.remove('active')
      if (link.getAttribute('href').substring(1) === current) {
        link.classList.add('active')
      }
    })
  }
  // 监听滚动事件
  window.addEventListener('scroll', highlightNavLink)

  // 2. 移动端菜单切换逻辑
  const menuToggle = document.getElementById('menuToggle')
  if (menuToggle) {
    menuToggle.addEventListener('click', function () {
      const navMenu = document.querySelector('.hidden.md\\:flex')
      if (navMenu) {
        navMenu.classList.toggle('hidden')
        navMenu.classList.toggle('flex')
        navMenu.classList.toggle('flex-col')
        navMenu.classList.toggle('absolute')
        navMenu.classList.toggle('top-16')
        navMenu.classList.toggle('right-4')
        navMenu.classList.toggle('bg-white')
        navMenu.classList.toggle('p-4')
        navMenu.classList.toggle('rounded-lg')
        navMenu.classList.toggle('shadow-lg')
      }
    })
  }

  // 3. 初始化所有图表
  initCharts()
})

document.addEventListener('DOMContentLoaded', function () {
  // 1. 获取元素：按钮、模态框、视频
  const videoBtn = document.getElementById('sanJiaoVideoBtn')
  const videoModal = document.getElementById('videoModal')
  const closeModalBtn = document.getElementById('closeModalBtn')
  const sanJiaoVideo = document.getElementById('sanJiaoVideo') // 本地视频元素（在线iframe可忽略）

  // 2. 点击按钮：显示模态框 + 播放视频（可选）
  videoBtn.addEventListener('click', function () {
    videoModal.classList.remove('hidden') // 显示模态框
    // 可选：自动播放视频（需注意浏览器自动播放政策，通常需要用户交互后才能自动播放）
    if (sanJiaoVideo) {
      sanJiaoVideo.play().catch((err) => {
        console.log('视频自动播放被阻止，需用户手动点击播放：', err)
      })
    }
  })

  // 3. 关闭模态框的两种方式：点击关闭按钮 + 点击模态框背景
  function closeModal() {
    videoModal.classList.add('hidden') // 隐藏模态框
    // 可选：暂停视频（避免隐藏后仍有声音）
    if (sanJiaoVideo) {
      sanJiaoVideo.pause()
    }
  }

  closeModalBtn.addEventListener('click', closeModal)
  // 点击模态框背景（除了视频容器外的区域）关闭
  videoModal.addEventListener('click', function (e) {
    if (e.target === videoModal) {
      // 仅点击背景遮罩时触发
      closeModal()
    }
  })

  // 4. 可选：按ESC键关闭模态框（提升键盘交互体验）
  document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape' && !videoModal.classList.contains('hidden')) {
      closeModal()
    }
  })

  // 原有的其他逻辑（导航高亮、图表初始化等）...
  highlightNavLink()
  initCharts()
})
// 图表初始化函数（基于Chart.js）
function initCharts() {
  // 开篇图表 - 近五年搜索指数曲线
  const introCtx = document.getElementById('introChart').getContext('2d')
  new Chart(introCtx, {
    type: 'line',
    data: {
      labels: ['2019', '2020', '2021', '2022', '2023'],
      datasets: [
        {
          label: '八段锦搜索指数',
          data: [1200, 3500, 4200, 6800, 9500],
          borderColor: '#4CAF50',
          backgroundColor: 'rgba(76, 175, 80, 0.1)',
          borderWidth: 3,
          fill: true,
          tension: 0.4,
        },
      ],
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: { display: false },
        tooltip: { mode: 'index', intersect: false },
      },
      scales: {
        y: { beginAtZero: true, title: { display: true, text: '搜索指数' } },
        x: { title: { display: true, text: '年份' } },
      },
    },
  })

  // 第一章 - 搜索指数裂变图（2018Q1-2023Q3）
  const searchCtx = document.getElementById('searchChart').getContext('2d')
  new Chart(searchCtx, {
    type: 'line',
    data: {
      labels: [
        '2018Q1',
        '2018Q3',
        '2019Q1',
        '2019Q3',
        '2020Q1',
        '2020Q3',
        '2021Q1',
        '2021Q3',
        '2022Q1',
        '2022Q3',
        '2023Q1',
        '2023Q3',
      ],
      datasets: [
        {
          label: '八段锦搜索指数',
          data: [
            800, 950, 1200, 1100, 3500, 3200, 4200, 4500, 6800, 7200, 9500,
            9200,
          ],
          borderColor: '#4CAF50',
          backgroundColor: 'rgba(76, 175, 80, 0.1)',
          borderWidth: 3,
          fill: true,
          tension: 0.4,
        },
      ],
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: { tooltip: { mode: 'index', intersect: false } },
      scales: {
        y: { beginAtZero: true, title: { display: true, text: '搜索指数' } },
      },
    },
  })

  // 第一章 - 用户画像气泡图（2021vs2023）
  const userProfileCtx = document
    .getElementById('userProfileChart')
    .getContext('2d')
  new Chart(userProfileCtx, {
    type: 'bubble',
    data: {
      datasets: [
        {
          label: '2021年用户',
          data: [
            { x: 25, y: 65, r: 15 },
            { x: 35, y: 45, r: 12 },
            { x: 45, y: 30, r: 10 },
            { x: 55, y: 20, r: 8 },
          ],
          backgroundColor: 'rgba(54, 162, 235, 0.5)',
          borderColor: 'rgba(54, 162, 235, 1)',
          borderWidth: 1,
        },
        {
          label: '2023年用户',
          data: [
            { x: 25, y: 75, r: 20 },
            { x: 35, y: 65, r: 18 },
            { x: 45, y: 55, r: 15 },
            { x: 55, y: 40, r: 12 },
            { x: 65, y: 25, r: 8 },
          ],
          backgroundColor: 'rgba(255, 99, 132, 0.5)',
          borderColor: 'rgba(255, 99, 132, 1)',
          borderWidth: 1,
        },
      ],
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        x: { title: { display: true, text: '年龄' }, min: 20, max: 70 },
        y: {
          title: { display: true, text: '女性用户比例 (%)' },
          min: 10,
          max: 80,
        },
      },
    },
  })

  // 第一章 - 地域热力与职业关联图（2023）
  const regionCtx = document.getElementById('regionChart').getContext('2d')
  new Chart(regionCtx, {
    type: 'scatter',
    data: {
      datasets: [
        {
          label: '一线城市',
          data: [
            { x: 9.2, y: 85 },
            { x: 9.5, y: 82 },
            { x: 9.8, y: 88 },
          ],
          backgroundColor: 'rgba(255, 99, 132, 0.8)',
          borderColor: 'rgba(255, 99, 132, 1)',
          borderWidth: 1,
        },
        {
          label: '新一线城市',
          data: [
            { x: 8.5, y: 75 },
            { x: 8.2, y: 72 },
            { x: 8.8, y: 78 },
            { x: 8.6, y: 74 },
          ],
          backgroundColor: 'rgba(54, 162, 235, 0.8)',
          borderColor: 'rgba(54, 162, 235, 1)',
          borderWidth: 1,
        },
        {
          label: '二线城市',
          data: [
            { x: 7.8, y: 65 },
            { x: 7.5, y: 62 },
            { x: 7.9, y: 68 },
          ],
          backgroundColor: 'rgba(75, 192, 192, 0.8)',
          borderColor: 'rgba(75, 192, 192, 1)',
          borderWidth: 1,
        },
        {
          label: '三线及以下城市',
          data: [
            { x: 7.2, y: 55 },
            { x: 6.8, y: 52 },
            { x: 7.4, y: 58 },
          ],
          backgroundColor: 'rgba(153, 102, 255, 0.8)',
          borderColor: 'rgba(153, 102, 255, 1)',
          borderWidth: 1,
        },
      ],
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        x: {
          title: { display: true, text: '平均通勤时间 (小时)' },
          min: 6,
          max: 10,
        },
        y: {
          title: { display: true, text: '八段锦搜索热度指数' },
          min: 50,
          max: 90,
        },
      },
    },
  })

  // 第一章 - 平台内容生态变化（2020-2023）
  // const platformCtx = document.getElementById('platformChart').getContext('2d')
  // new Chart(platformCtx, {
  //   type: 'bar',
  //   data: {
  //     labels: ['2020', '2021', '2022', '2023'],
  //     datasets: [
  //       {
  //         label: '小红书',
  //         data: [1200, 3500, 8200, 15800],
  //         backgroundColor: 'rgba(255, 0, 0, 0.7)',
  //         borderColor: 'rgba(255, 0, 0, 1)',
  //         borderWidth: 1,
  //       },
  //       {
  //         label: 'B站',
  //         data: [800, 2200, 5800, 11200],
  //         backgroundColor: 'rgba(0, 158, 255, 0.7)',
  //         borderColor: 'rgba(0, 158, 255, 1)',
  //         borderWidth: 1,
  //       },
  //       {
  //         label: '抖音',
  //         data: [1500, 4200, 9800, 18500],
  //         backgroundColor: 'rgba(0, 206, 209, 0.7)',
  //         borderColor: 'rgba(0, 206, 209, 1)',
  //         borderWidth: 1,
  //       },
  //     ],
  //   },
  //   options: {
  //     responsive: true,
  //     maintainAspectRatio: false,
  //     scales: {
  //       y: {
  //         beginAtZero: true,
  //         title: { display: true, text: '相关内容数量' },
  //       },
  //     },
  //   },
  // })

  // 第二章 - 青年健康问题发生率（柱状图）
  const healthIssuesCtx = document
    .getElementById('healthIssuesChart')
    .getContext('2d')
  new Chart(healthIssuesCtx, {
    type: 'bar',
    data: {
      labels: ['睡眠问题', '颈椎不适', '焦虑情绪', '精力不足', '消化问题'],
      datasets: [
        {
          label: '18-35岁青年健康问题发生率 (%)',
          data: [58.3, 76.2, 54.7, 62.8, 38.5],
          backgroundColor: [
            'rgba(54, 162, 235, 0.7)',
            'rgba(75, 192, 192, 0.7)',
            'rgba(255, 206, 86, 0.7)',
            'rgba(255, 99, 132, 0.7)',
            'rgba(153, 102, 255, 0.7)',
          ],
          borderColor: [
            'rgba(54, 162, 235, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(255, 99, 132, 1)',
            'rgba(153, 102, 255, 1)',
          ],
          borderWidth: 1,
        },
      ],
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        y: {
          beginAtZero: true,
          max: 100,
          title: { display: true, text: '发生率 (%)' },
        },
      },
    },
  })

  // 第二章 - 时间成本对比图（八段锦vs其他运动）
  const timeCostCtx = document.getElementById('timeCostChart').getContext('2d')
  new Chart(timeCostCtx, {
    type: 'bar',
    data: {
      labels: ['八段锦', '健身房', '跑步', '瑜伽'],
      datasets: [
        {
          label: '单次平均时间 (分钟)',
          data: [15, 90, 45, 60],
          backgroundColor: [
            'rgba(76, 175, 80, 0.7)',
            'rgba(255, 99, 132, 0.7)',
            'rgba(54, 162, 235, 0.7)',
            'rgba(255, 206, 86, 0.7)',
          ],
          borderColor: [
            'rgba(76, 175, 80, 1)',
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
          ],
          borderWidth: 1,
        },
      ],
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        y: { beginAtZero: true, title: { display: true, text: '时间 (分钟)' } },
      },
    },
  })

  // 第二章 - 经济成本对比图（八段锦vs其他运动）
  const costCtx = document.getElementById('costChart').getContext('2d')
  new Chart(costCtx, {
    type: 'bar',
    data: {
      labels: ['八段锦', '健身房', '跑步', '瑜伽'],
      datasets: [
        {
          label: '月均花费 (元)',
          data: [0, 300, 50, 200],
          backgroundColor: [
            'rgba(76, 175, 80, 0.7)',
            'rgba(255, 99, 132, 0.7)',
            'rgba(54, 162, 235, 0.7)',
            'rgba(255, 206, 86, 0.7)',
          ],
          borderColor: [
            'rgba(76, 175, 80, 1)',
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
          ],
          borderWidth: 1,
        },
      ],
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        y: { beginAtZero: true, title: { display: true, text: '花费 (元)' } },
      },
    },
  })

  // 第二章 - 睡眠改善Meta分析图
  const sleepMetaCtx = document
    .getElementById('sleepMetaChart')
    .getContext('2d')
  new Chart(sleepMetaCtx, {
    type: 'bar',
    data: {
      labels: [
        '研究1',
        '研究2',
        '研究3',
        '研究4',
        '研究5',
        '研究6',
        '研究7',
        '研究8',
        '合并效应',
      ],
      datasets: [
        {
          label: '睡眠质量改善效应值',
          data: [0.45, 0.62, 0.38, 0.71, 0.55, 0.49, 0.58, 0.41, 0.52],
          backgroundColor: [
            'rgba(54, 162, 235, 0.7)',
            'rgba(54, 162, 235, 0.7)',
            'rgba(54, 162, 235, 0.7)',
            'rgba(54, 162, 235, 0.7)',
            'rgba(54, 162, 235, 0.7)',
            'rgba(54, 162, 235, 0.7)',
            'rgba(54, 162, 235, 0.7)',
            'rgba(54, 162, 235, 0.7)',
            'rgba(76, 175, 80, 0.9)',
          ],
          borderColor: [
            'rgba(54, 162, 235, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(76, 175, 80, 1)',
          ],
          borderWidth: 1,
        },
      ],
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        y: {
          beginAtZero: true,
          max: 1,
          title: { display: true, text: '效应值 (SMD)' },
        },
      },
    },
  })

  // 第二章 - 用户主观体验雷达图（练习前后对比）
  const radarCtx = document.getElementById('radarChart').getContext('2d')
  new Chart(radarCtx, {
    type: 'radar',
    data: {
      labels: [
        '睡眠质量',
        '情绪稳定',
        '精力水平',
        '颈椎舒适',
        '消化功能',
        '免疫力',
      ],
      datasets: [
        {
          label: '练习前',
          data: [3.2, 3.5, 3.8, 2.9, 3.6, 3.4],
          backgroundColor: 'rgba(255, 99, 132, 0.2)',
          borderColor: 'rgba(255, 99, 132, 1)',
          borderWidth: 2,
          pointBackgroundColor: 'rgba(255, 99, 132, 1)',
        },
        {
          label: '练习后',
          data: [4.5, 4.3, 4.6, 4.2, 4.4, 4.1],
          backgroundColor: 'rgba(54, 162, 235, 0.2)',
          borderColor: 'rgba(54, 162, 235, 1)',
          borderWidth: 2,
          pointBackgroundColor: 'rgba(54, 162, 235, 1)',
        },
      ],
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: { r: { beginAtZero: true, max: 5, ticks: { stepSize: 1 } } },
    },
  })

  // 第三章 - 个人健康责任与八段锦热度关联图（双Y轴）
  const healthExpenditureCtx = document
    .getElementById('healthExpenditureChart')
    .getContext('2d')
  new Chart(healthExpenditureCtx, {
    type: 'line',
    data: {
      labels: [
        '2014',
        '2015',
        '2016',
        '2017',
        '2018',
        '2019',
        '2020',
        '2021',
        '2022',
      ],
      datasets: [
        {
          label: '个人现金卫生支出占比 (%)',
          data: [33.2, 32.7, 31.9, 30.8, 29.3, 28.4, 27.7, 27.2, 26.89],
          borderColor: 'rgba(255, 99, 132, 1)',
          backgroundColor: 'rgba(255, 99, 132, 0.1)',
          borderWidth: 3,
          yAxisID: 'y',
          tension: 0.4,
        },
        {
          label: '八段锦搜索热度指数',
          data: [800, 850, 900, 950, 1100, 1200, 3500, 4200, 6800],
          borderColor: 'rgba(54, 162, 235, 1)',
          backgroundColor: 'rgba(54, 162, 235, 0.1)',
          borderWidth: 3,
          yAxisID: 'y1',
          tension: 0.4,
        },
      ],
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      interaction: { mode: 'index', intersect: false },
      scales: {
        x: { title: { display: true, text: '年份' } },
        y: {
          type: 'linear',
          display: true,
          position: 'left',
          title: { display: true, text: '个人现金卫生支出占比 (%)' },
          min: 20,
          max: 35,
        },
        y1: {
          type: 'linear',
          display: true,
          position: 'right',
          title: { display: true, text: '八段锦搜索热度指数' },
          min: 0,
          max: 8000,
          grid: { drawOnChartArea: false },
        },
      },
    },
  })
}
tips={
	"10分钟": "午休只有半小时，10分钟八段锦刚好能缓解上午的疲劳",
	"打卡" :"每天练完就在群里打卡，看到一串已签特别有成就感，像完成了一个KPI",
	"缓解":"颈椎问题困扰多年，八段锦的某些动作真的能缓解疼痛",
	"跟练":"跟着B站UP主的视频练习，比自己看书学快多了",
	"见效快":"坚持一个月，睡眠质量明显改善，真的见效了",
	"碎片时间":"工作间隙、等公交的碎片时间都可以练几式",
	"办公室":"午休时在办公室练八段锦，同事也跟着一起练起来了",
	"宿舍":"宿舍空间小，但八段锦不需要太大地方，很适合",
	"坚持":"最难的是坚持，但打卡机制让我坚持下来了",
}
img_link = {
	"社区版八段锦": "https://www.thepaper.cn/newsDetail_forward_30705488",
	"动漫版八段锦": "https://www.bilibili.com/video/BV1PWYYeGEUu",
	"工位版八段锦": "https://www.toutiao.com/article/7557591395658187283",
}

document.querySelectorAll(".yuntu span").forEach(el => {
	
  el.addEventListener("click", () => {
	alert(tips[el.innerText] || "暂无提示")
  })
})
document.querySelectorAll(".confident img").forEach(el => {
	
  el.addEventListener("click", () => {
	window.open(img_link[el.alt]);
  })
})